<ion-header class="bind-bank-apply-header">
  <ion-navbar hideBackButton="true">

    <ion-buttons start navPop class="back-buttons">
      <button ion-button clear></button>
    </ion-buttons>


    <ion-title float-left>分期付</ion-title>
  </ion-navbar>
</ion-header>


<ion-content class="bind-bank-apply-section">

  <div class="company-name">商户名称: <span>上海禾穆网络科技有限公司</span></div>

  <div class="identity-info">
    <div><span></span><p>身份信息</p></div>
    <ul>
      <li>
        <h2>持卡人姓名</h2>
        <div>{{ userInfo.realname }}</div>
      </li>
      <li>
        <h2>证件类型</h2>
        <div>身份证</div>
      </li>
      <li>
        <h2>证件号码</h2>
        <div>{{userInfo.idNo | identity }}</div>
      </li>

    </ul>
  </div>

  <div class="card-info">
    <div><span></span><p>银行卡信息</p></div>
    <ul>
      <li>
        <h2>卡信息</h2>
        <div>{{userInfo.bankNo | bank }}</div>
      </li>
      <li>
        <h4>借记卡</h4>
        <p>{{userInfo.bankName}}</p>
      </li>

    </ul>
  </div>

  <form #telephoneRef="ngForm">
    <ion-item>
      <!-- pattern="\\d{11,11}"-->
      <input [(ngModel)]="userInfo.bankphone"
             type="text"
             name="username"
             #telephoneRef="ngModel"
             placeholder="请输入手机号"
             maxlength="11"
             required
      >
      <span *ngIf="userInfo.bankphone.length>0"
            class="clear-button"
            (click)="clearUserName()"
      ></span>

    </ion-item>

    <div class="agree-protocol">
      <span [class.active]="hasActive" (click)="executeChange()"></span>
      <div>同意<a (click)="doServiceAgreement()">《银生宝服务协议》</a></div>
    </div>

    <button ion-button
            [disabled]="!(telephoneRef.valid &&hasActive)"
            color="default"
            (click)="executeAgree()"
            block
    >确定</button>

  </form>

</ion-content>
